<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API密钥配置指南</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        h1 {
            color: #1890ff;
            text-align: center;
            margin-bottom: 30px;
        }
        h2 {
            color: #40a9ff;
            margin-top: 30px;
            border-bottom: 1px solid #e8e8e8;
            padding-bottom: 10px;
        }
        p {
            margin-bottom: 15px;
        }
        ul, ol {
            margin-bottom: 20px;
            padding-left: 25px;
        }
        li {
            margin-bottom: 10px;
        }
        .api-config-btn {
            display: block;
            margin: 30px auto;
            padding: 12px 24px;
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
            text-align: center;
            width: 200px;
        }
        .api-config-btn:hover {
            background-color: #40a9ff;
        }
        .note {
            background-color: #fff7e6;
            border-left: 4px solid #fa8c16;
            padding: 15px;
            margin: 20px 0;
        }
        .code-block {
            background-color: #f6ffed;
            border: 1px solid #b7eb8f;
            border-radius: 4px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI模型API密钥配置指南</h1>
        
        <p>智能生成测试用例功能需要配置有效的AI模型API密钥才能正常工作。请按照以下步骤进行配置：</p>
        
        <h2>步骤1：访问API密钥配置页面</h2>
        <p>点击下方按钮或复制链接到浏览器打开API密钥配置页面：</p>
        <a href="/api-key-config.html" class="api-config-btn">前往API密钥配置页面</a>
        
        <div class="code-block">
访问链接: http://localhost:5174/api-key-config.html
        </div>
        
        <h2>步骤2：配置DeepSeek API密钥</h2>
        <ol>
            <li>在API密钥配置页面中，找到"DeepSeek-R1"模型的配置区域</li>
            <li>输入您的DeepSeek API密钥（从DeepSeek官方网站申请获取）</li>
            <li>API Base URL保持默认值 <code>https://api.deepseek.com</code></li>
            <li>点击"保存此模型"按钮保存配置</li>
            <li>可选：点击"设为默认"按钮将DeepSeek-R1设为默认模型</li>
        </ol>
        
        <h2>步骤3：验证配置</h2>
        <p>配置完成后，刷新智能生成测试用例页面，尝试上传需求文档进行分析。</p>
        
        <div class="note">
            <strong>注意：</strong><br>
            1. API密钥将保存在您的浏览器本地存储中，不会上传到服务器<br>
            2. 如果您没有DeepSeek API密钥，请访问DeepSeek官方网站申请<br>
            3. 配置后如有问题，请刷新页面或清除浏览器缓存后重试
        </div>
        
        <h2>常见问题</h2>
        <ul>
            <li><strong>问题：配置后仍然提示"API密钥未正确配置"</strong><br>
                解决：请检查密钥是否正确，并确保没有多余的空格或换行符。</li>
            <li><strong>问题：API调用失败，显示网络错误</strong><br>
                解决：请检查您的网络连接，并确保防火墙没有阻止API请求。</li>
            <li><strong>问题：文件上传失败，显示400错误</strong><br>
                解决：请确保选择了有效的项目和版本，并且上传的文件格式为.docx、.txt或.md。</li>
        </ul>
    </div>
</body>
</html>